<template>
    <div class="login">
        <div class="login-box">
            <div class="login-form">
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
                    <div class="login-form-title"></div>
                    <el-form-item prop="username">
                        <el-input
                                v-model="loginForm.account"
                                type="text"
                                auto-complete="off"
                                placeholder="账号"
                                prefix-icon="iconfont icon-user"
                        />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                                v-model="loginForm.password"
                                type="password"
                                placeholder="密码"
                                prefix-icon="iconfont icon-lock"

                        />
                    </el-form-item>
                    <el-form-item style="width: 100%">
                        <el-button

                                class="login-btn"
                                size="medium"
                                type="primary"
                                style="width: 100%"
                                @click.native.prevent="handleLogin"
                        >
                            <span>登录</span>
                            <!--                            <span v-else>登录中...</span>-->
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>


<style>
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 500px;
    background-color: #333;
    border-radius: 180px;
    position: absolute;
    right: 50%;
    left: 50%;
    transform: translate(-50%, 20%);
}

.login-box {
    justify-content: center;
    align-items: center;
    width: 1000px;
    height: 474px;
    display: flex;
}

.title {
    margin: 0 auto 10px auto;
    text-align: left;
    color: #707070;
}

.login-form {
    background: #333333;
    width: 40%;
    border-radius: 0 8px 8px 0px;
    display: flex;
    justify-content: center;
    align-items: center;

    .el-form {
        width: 214px;
        height: 307px;
    }

    .el-form-item {
        margin-bottom: 30px;
    }

    .el-form-item.is-error .el-input__inner {
        border: 0 !important;
        border-bottom: 1px solid #fd7065 !important;
        background: #fff !important;
    }

    .input-icon {
        height: 32px;
        width: 18px;
        margin-left: -2px;
    }

    .el-input__inner {
        border: 0;
        border-bottom: 1px solid #e9e9e8;
        border-radius: 0;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        height: 32px;
        line-height: 32px;
    }

    .el-input__prefix {
        left: 0;
    }

    .el-input--prefix .el-input__inner {
        padding-left: 26px;
    }

    .el-input__inner::placeholder {
        color: #aeb5c4;
    }

    .el-form-item--medium .el-form-item__content {
        line-height: 32px;
    }

    .el-input--medium .el-input__icon {
        line-height: 32px;
    }
}

.login-btn {
    border-radius: 17px;
    padding: 11px 20px !important;
    margin-top: 10px;
    font-weight: 500;
    font-size: 12px;
    border: 0;
    color: #333333;
    background-color: #ffc200;

}

.login-form-title {
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;

    .title-label {
        font-weight: 500;
        font-size: 20px;
        color: #333333;
        margin-left: 10px;
    }
}
</style>

<script>

import axios from "axios";
import loading from "element-ui/packages/loading";

export default {
    computed: {
        loading() {
            return loading
        }
    },
    data() {
        let validateUsername = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入用户名'))
            } else {
                callback()
            }
        }

        let validatePassword = (rule, value, callback) => {
            if (value.length < 6) {
                callback(new Error('密码必须在6位以上'))
            } else {
                callback()
            }
        }

        return {
            loginForm: {
                account: 'Lotus',
                password: 'qwe123',
            },
            loginRules: {
                username: [{validator: validateUsername, trigger: 'blur'}],
                password: [{validator: validatePassword, trigger: 'blur'}],
            },
            employee: {
                id: '',
                account: '',
                name: '',
                gender: '',
                token: '',
            }
        }

    },


    methods: {
        // 登录
        handleLogin() {
            let url = "/employee/admin/emp/login";
            axios.post(url, this.loginForm, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(
                    (res) => {
                        //console.log(res);
                        this.employee.id = res.data.data.id;
                        this.employee.account = res.data.data.account;
                        this.employee.name = res.data.data.name;
                        this.employee.gender = res.data.data.gender;
                        this.employee.token = res.data.data.token;
                        sessionStorage.setItem('token', this.employee.token);
                        this.$router.push({path: '/category'});
                    }
            ).catch(
                    (err) => {
                        console.log(err);
                    }
            )
        }

    },

    mounted() {

    }


};
</script>
